<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html"; charset="UTF-8" />
        <title>vertical-wizard</title>
        <script type="text/javascript" src="../../js/jquery/jquery.js">
        </script>
        <script type="text/javascript" src="../../js/jquery/jquery-migrate.js">
        </script>
        <script type="text/javascript" src="../../js/jqueryui/jquery-ui.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/public/jsextend.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/public/ctp.core.js">
        </script>		
		<script type='text/javascript' src='../../js/ctp/public/ctp.base.js'></script>
		<script type='text/javascript' src='../../js/ctp/public/ctp.ui.component.js'></script>
		<script type="text/javascript" src="../../js/ctp/gridlayout/ctp.ui.gridlayout.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/textfield/ctp.ui.textfield.js">
		</script>
        <script type="text/javascript" src="../../js/ctp/label/ctp.ui.label.js">
		</script>
        <script type="text/javascript" src="../../js/ctp/button/ctp.ui.button.js">
		</script>
		<script type="text/javascript" src="../../js/ctp/combobox/ctp.ui.combobox.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/listview/ctp.ui.listview.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/checkboxgroup/ctp.ui.checkboxgroup.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/checkbox/ctp.ui.checkbox.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/radio/ctp.ui.radio.js">
        </script>	
		 <script type="text/javascript" src="../../js/ctp/rte/ctp.ui.rte.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/colormenu/ctp.ui.colormenu.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/panel/ctp.ui.panel.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/radiogroup/ctp.ui.radiogroup.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/vwizard/ctp.ui.vwizard.js">
        </script>	
		<script type="text/javascript" src="../../js/ctp/groupbox/ctp.ui.groupbox.js">
		</script>
		<script type="text/javascript" src="../../js/ctp/messagebox/ctp.ui.messagebox.js">
		</script>	
        <link href="../../css/skins/standard/ctp-common.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/panel.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/textfield.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/checkboxgroup.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/radiogroup.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/button.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/label.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/combobox.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/listview.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/radiogroup.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/radio.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/checkbox.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/rte.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/colormenu.css" rel="stylesheet" type="text/css"/>    
		<link href="../../css/vwizard.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/gridlayout.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/groupbox.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/messagebox.css" rel="stylesheet" type="text/css"/>
        <script>
        	//ctp.core.log.lvl = ctp.core.loglvl.obj; //需要进行调试时启用
            $(document).ready(function(){ 			                 
				var tfUser = new ctp.ui.textfield({
					id: 'user',
					width: '100%'
				});
				var tfPwd = new ctp.ui.textfield({
					id: 'pwd',
					width: '100%',
					type: 'password'
				});
				var tfRePwd = new ctp.ui.textfield({
					id: 'repwd',
					width: '100%',
					type: 'password'
				});
				var gl1 = new ctp.ui.gridlayout({
                    id: 'gl1',
					width: '50%',
					align: 'center',
					colSpace: 30,
					cols: 1,
					defaults: {label:{width:'100px'}},
					items: [
						[{label:{text:'输入账号:'},element: tfUser}],
						[{label:{text:'输入密码:'},element: tfPwd}],
						[{label:{text:'重输密码:'},element: tfRePwd}]
					]
                });
				var tfEmail = new ctp.ui.textfield({
					id: 'email',
					width: '100%'
				});
				var btnSend = new ctp.ui.button({
					id: 'btnsend',
					text: '发送邮件',
					icon: 'apply',
					width: '100%'
				});
				var gl2 = new ctp.ui.gridlayout({
                    id: 'gl2',
					width: '80%',
					align: 'center',
					colSpace: 30,
					cols: 2,
					defaults: {label:{width:'130px'}},
					items: [
						[
							{colwidth: '70%',label:{text:'请输入电子邮箱地址:'},element: tfEmail},
							{colwidth: '30%',element: btnSend}
						]
					]
                });	
				var tfName = new ctp.ui.textfield({
					id: 'usrName',
					width: '100%'
				});
				var rgSex = new ctp.ui.radiogroup({
					id: 'sex',
					width: '100%',
					display: 'cols',
					itemWidth:'30px',
					items:[
						{id:'radio1',label:'男',checked: true,value:'0'},
						{id:'radio2',label:'女',value:'1'}
					]
				});
				var lvAge = new ctp.ui.listview({
					id: 'age',
                    width: '100%',
                    items: [{
                        text: '小于18岁',
                        value: '1'
                    }, {
                        text: '18岁～25岁',
                        value: '2'
                    }, {
                        text: '26岁～32岁',
                        value: '3'
                    }, {
                        text: '33岁～40岁',
                        value: '4'
                    }, {
                        text: '41岁～50岁',
                        value: '5'
                    }, {
                        text: '大于50岁',
                        value: '6'
                    }]
				});
				var cbPro=new ctp.ui.checkboxgroup({
					id: 'pro',
					width: '100%',
					itemWidth: '90px',
         			items: [
						{id: 'cb1',label:'篮球'},
						{id: 'cb2',label:'足球'},
						{id: 'cb3',label:'网球'},
						{id: 'cb4',label:'羽毛球'},
						{id: 'cb5',label:'乒乓球'},
						{id: 'cb6',label:'游泳'}
					],
         			display: 'rows'
				});
				var rteDesc = new ctp.ui.rte({
					width: '100%',
                    addBR: false,
                    controls: {
                        'fontname': {
                            visible: true
                        }
                    }
				});
				var gl3 = new ctp.ui.gridlayout({
                    id: 'gl3',
					width: '80%',
					align: 'center',
					colSpace: 30,
					cols: 2,
					defaults: {label:{width:'60px'}},
					items: [
						[
							{label:{text:'姓名:'},element: tfName},
							{label:{text:'性别:'},element: rgSex}
						],
						[
							{label:{text:'年龄:'},element: lvAge},
							{label:{text:'爱好:'},element: cbPro}
						],
						[
							{colspan: 2,label:{text:'个人简介:'},element: rteDesc}
						]
					]
                });						
                var vw = new ctp.ui.vwizard({
                    id: 'vwizardId',
					title: '注册向导',
					left: true,
					align: 'center',
                    steps: [{
                        title: "第1步：注册账号",
                        prevBtn: {
							text: '上一步',
                            valid: false
                        },
                        nextBtn: {
							text: '下一步',
                            valid: true
                        },
						finishBtn: {
							text: '完成',
                            valid: true
                        },
						items: ['vwizardDiv1',gl1]
                    }, {
                        title: "第2步：邮箱确认",
                        prevBtn: {
							text: '上一步',
                            valid: true
                        },
                        nextBtn: {
							text: '下一步',
                            valid: true
                        },
						finishBtn: {
							text: '完成',
                            valid: true
                        },
						items: ['vwizardDiv2',gl2]
                    }, {
                        title: "第3步：填写资料",
                        prevBtn: {
							text: '上一步',
                            valid: true
                        },
                        nextBtn: {
							text: '下一步',
                            valid: true
                        },
						finishBtn: {
							text: '完成',
                            valid: true
                        },
					items: ['vwizardDiv3',gl3]
                    }, {
                        title: "第4步：基本配置",
                        prevBtn: {
							text: '上一步',
                            valid: true
                        },
                        nextBtn: {
							text: '下一步',
                            valid: true
                        },
						finishBtn: {
							text: '完成',
                            valid: true
                        },
						items: []
                    }, {
                        title: "第5步：高级配置",
                        prevBtn: {
							text: '上一步',
                            valid: true
                        },
                        nextBtn: {
							text: '下一步',
                            valid: false
                        },
						finishBtn: {
							text: '完成',
                            valid: true
                        },
						items: []
                    }],
                    width: '98%',
                    height: 300
                });            
                var button1=new ctp.ui.button({
                    id: 'button1',
                    text: '取得组件ID',
                    width: '100%',
                    onClick: function(){
						ctpMSB.alert({title:'信息提示',message:vw.getId()});
                    }
                });
                var button2=new ctp.ui.button({
                    id: 'button2',
                    text: '取得组件Dom ID',
                    width: '100%',
                    onClick: function(){
                        ctpMSB.alert({title:'信息提示',message:vw.getDomId()});
                    }
                });
                var button3=new ctp.ui.button({
                    id: 'button3',
                    text: '取得组件类型',
                    width: '100%',
                    onClick: function(){                
						ctpMSB.alert({title:'信息提示',message:vw.getCtpWebType()});
                    }
                });
               var button4= new ctp.ui.button({
                    id: 'button4',
                    text: '重置',
                    width: '100%',
                    onClick: function(){
                        vw.reset();
                    }
                });
				var combobox1 = new ctp.ui.combobox({
					id: 'combobox1',
					width:'100%',
			  	    items:[{value:'0',text:'追加到第1步',selected: true},
						   {value:'1',text:'追加到第2步'},
						   {value:'2',text:'追加到第3步'},
						   {value:'3',text:'追加到第4步'},
						   {value:'4',text:'追加到第5步'}]
				});
                var button5=new ctp.ui.button({
                    id: 'button5',
                    text: '追加组件到容器',
                    width: '100%',
                    onClick: function(){
                        var stdIdx = combobox1.getValue();
						vw.append(new ctp.ui.textfield({}),parseInt(stdIdx));
                    }
                });
                var button6=new ctp.ui.button({
                    id: 'button6',
                    text: '从容器删除组件',
                    width: '100%',
                    onClick: function(){
                        vw.delObjs(['gl1','gl2','gl3']);                    }
                });
				var button7=new ctp.ui.button({
                    id: 'button7',
                    text: '取得当前步骤',
                    width: '100%',
                    onClick: function(){
						ctpMSB.alert({title:'信息提示',message:vw.getCurStep()});
					}
                });
				var prevValid = true;
				var button8=new ctp.ui.button({
                    id: 'button8',
                    text: '禁用/启用上一步按钮',
                    width: '100%',
                    onClick: function(){
						prevValid = !prevValid;
                        vw.setPrevValid(prevValid);                    }
                });
				var nextValid = true;
				var button9=new ctp.ui.button({
                    id: 'button9',
                    text: '禁用/启用下一步按钮',
                    width: '100%',
                    onClick: function(){
						nextValid = !nextValid;
                        vw.setNextValid(nextValid);                  }
                });
				var finishValid = true;
				var button10=new ctp.ui.button({
                    id: 'button10',
                    text: '禁用/启用完成按钮',
                    width: '100%',
                    onClick: function(){
                        finishValid = !finishValid;
                        vw.setFinishValid(finishValid);                    }
                });
				var button11=new ctp.ui.button({
                    id: 'button11',
                    text: '取得所有向导页id',
                    width: '100%',
                    onClick: function(){
						ctpMSB.alert({title:'信息提示',message:vw.getContentDomIds().join(' | ')});
					}
                });
				var combobox2 = new ctp.ui.combobox({
					id: 'combobox2',
					width:'100%',
			  	    items:[{value:'0',text:'取第1步向导页id',selected: true},
						   {value:'1',text:'取第2步向导页id'},
						   {value:'2',text:'取第3步向导页id'},
						   {value:'3',text:'取第4步向导页id'},
						   {value:'4',text:'取第5步向导页id'}]
				});
                var button12=new ctp.ui.button({
                    id: 'button12',
                    text: '取得向导页id',
                    width: '100%',
                    onClick: function(){
                        var stdIdx = combobox2.getValue();
						ctpMSB.alert({title:'信息提示',message:vw.getContentDomId(parseInt(stdIdx))});
                    }
                });
				var button13=new ctp.ui.button({
                    id: 'button13',
                    text: '取得总步骤数',
                    width: '100%',
                    onClick: function(){
                        ctpMSB.alert({title:'信息提示',message:vw.getStdsCount()});                   }
                });
				var combobox3 = new ctp.ui.combobox({
					id: 'combobox3',
					width:'100%',
			  	    items:[{value:'1',text:'跳到第2步',selected: true},
						   {value:'2',text:'跳到第3步'},
						   {value:'3',text:'跳到第4步'},
						   {value:'4',text:'跳到第5步'}]
				});
				var button14=new ctp.ui.button({
                    id: 'button14',
                    text: '跳转步骤',
                    width: '100%',
                    onClick: function(){
                        var stdIdx = combobox3.getValue();
						if(parseInt(stdIdx)<=vw.getCurStep()){
							ctpMSB.alert({title:'信息提示',message:'请选择后续步骤跳转'});
							return;
						}
						vw.jumpToStep(parseInt(stdIdx));
                    }
                });  
				var showGroupbox=new ctp.ui.groupbox({
			  	    id: 'showGroupbox',						
					items:[vw],
					title:'效果展示区'						   
			     });
				var buttonsLayout = new ctp.ui.gridlayout({
					id:'buttonsLayout',
                    width: '98%',
                    cols: 3,
                    align: 'center',
                    colSpace: 30,
                    items: [
					     [{element: button1},{element: button2},{element: button3}],
						 [{element: button4},{element: combobox1},{element: button5}],
						 [{element: button6},{element: button7},{element: button8}],
						 [{element: button9},{element: button10},{element: button11}],
						 [{element: combobox2},{element: button12},{element: button13}],
						 [{element: combobox3},{element: button14}]
					]
                
                }); 
				var buttonsGroupbox=new ctp.ui.groupbox({
			  	    id: 'buttonsGroupbox',						
					items:[buttonsLayout],
					width:'100%',
					title:'功能测试区'						   
			     });
				new ctp.ui.panel({
                    title: 'vwizard实例',
                    collapsible: true,
                    width: '560px',
                    height: 'auto',
					align:'center',
					items:[showGroupbox,buttonsGroupbox],
                    renderTo: 'body'
                });            
            });
        </script>
    </head>
    <body>
    	<b>ctp.ui.vwizard实例</b>
        <hr/>
        <br/>
		<div id="vwizardDiv1" style="width: 90%;height: 30px"></div>
		<div id="vwizardDiv2" style="width: 90%;height: 30px"></div>
		<div id="vwizardDiv3" style="width: 90%;height: 30px"></div>
    </body>
</html>
